<template>
	<view class="complaintService">
		<view class="explain">
			客服职责是为了用户服务和维护平台秩序，如果你碰到了
			不负责任甚至以权谋私的情况，欢迎在此提交投诉！只要
			情况属实，狐狸花园一定秉公办理，所举报情节严重者将
			酌情给予现金奖励。
		</view>
		<view class="communicationTime me-fx-row-start-c">
			<view class="communicationLeft" >
				沟通时间
			</view>
			<view class="communicationRight" @click="show=true" v-if="chatTime">
				请选择你与被投诉客服的最近沟通时间
			</view>
			<view class="communicationRight" @click="show=true" v-else>
				{{selectTimeVal}}
			</view>
		</view>
		<view class="pleaseSelect">
			请选择投诉原因
		</view>
		<view class="reasonList">
			<view class="reasonBox me-fx-row-sb-c border" @click="reasonBtn(index)" v-for="(item, index) in reasonBox">
				<view class="">
					{{item.name}}
				</view>
				<image src="../../static/img/get.png" mode="" v-if="indexShow== index"></image>
			</view>
		</view>
		<view class="pleaseSelect">
			请提供相关证据，以便我们跟进核实
		</view>
		<view class="screenshotBox">
			<view class="">
				相关截图
			</view>
			<view class="title">

			</view>
			<view class="upload">

			</view>
			<image :src="uploadPic" mode=""></image>
		</view>
		<view class="supplementBox">
			<view class="">
				补充描述
			</view>
			<textarea value="" placeholder="选填" class="textVal" />
			</view>
		<view class="sureBtn">
			提交
		</view>
		<!-- 时间 -->
		<u-select v-model="show" mode="time" :list="params" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
						year: true,
						month: true,
						day: true,
						hour: false,
						minute: false,
						second: false
					},
					chatTime:true,
				show:false,
				selectTimeVal:'',
				reasonBox:[{
					name:'沟通态度恶劣',
					id:1,
					check:false
				},
				{
					name:'私下添加联系方式',
					id:'2',
					check:false
				},
				{
					name:'威胁我的隐私安全',
					id:'3',
					check:false
				},
				{
					name:'暗示或要求贿赂',
					id:'4',
					check:false
				},
				{
					name:'其他',
					id:'5',
					check:false
				}],
				indexShow:0,
				uploadPic:''
			}
		},
		created() {},
		methods: {
			reasonBtn(index){
				console.log(index)
				this.indexShow =index
			},
			selectTime(){
				if(this.selectTimeVal == ''){
					uni.showToast({
						title:'请选择时间',
						duration:1000,
						icon:'none'
					})
					return
				}else{
					
				}
			},

		}
	}
</script>

<style>
	.complaintService {
		width: 100%;
		/* height: 100%; */
		background-color: #F9F6FF;
	}

	.explain {
		padding: 28rpx;
		font-size: 28rpx;
		color: rgba(102, 102, 102, 1);
		line-height: 40rpx;
	}
	.communicationTime{
		background-color: white;
		height: 110rpx;
		font-size:30rpx;
		color:rgba(51,51,51,1);
		padding:0 30rpx ;
		}
		.communicationTime .communicationRight{
			font-size:28rpx;
			color:rgba(196,196,196,1);
			margin-left: 65rpx;
		}
		.pleaseSelect{
			padding:0 30rpx ;
			color: #666666;
			height: 100rpx;
			line-height: 100rpx;
		}
		.reasonList{
			background-color: white;
			padding: 0 30rpx;
		}
		.reasonList .reasonBox:nth-of-type(n+2){
			border-top: 1rpx solid #F9F6FF;
		}
		.reasonList .reasonBox{
			height: 100rpx;
			line-height: 100rpx;
			font-size: 30rpx;
		}
		.reasonBox image {
			width:48rpx;
			height:32rpx;
			display: block;
		}
		.screenshotBox{
			background-color: white;
			padding: 36rpx 30rpx;
		}
		.screenshotBox .title{
			width:180rpx;
			height:180rpx;
			background:rgba(255,255,255,1);
			border:1rpx solid rgba(240,239,239,1);
			border-radius:16rpx;
			position: relative;
			margin: 36rpx 0rpx;
		}
		.screenshotBox .title::before{
			content: '';
			width: 40rpx;
			height: 2rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			background-color: #CFCFCF;
			transform: translate(-50%,-50%);
		}
		.screenshotBox .title::after{
			content: '';
			width: 2rpx;
			height: 40rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			background-color: #CFCFCF;
			transform: translate(-50%,-50%);
		}
		.supplementBox{
			background-color: white;
			margin-top: 24rpx;
			padding: 30rpx;
			color: #333333;
			font-size: 30rpx;
			height: 200rpx;
		}
		.supplementBox .textVal{
			color: #333333;
			font-size: 28rpx;
			padding: 30rpx 0;
		}
		.sureBtn{
			width:686rpx;
			height:98rpx;
			background:#5C14FF;
			border-radius:49rpx;
			margin:114rpx auto 50rpx;
			font-size:36rpx;
			color:rgba(255,255,255,1);
			text-align: center;
			line-height: 98rpx;
		}
</style>
